// pages/component/radar/radar.js
//雷达图
var numCount = 6; //边数
var numSlot = 5; //圈数
var mW = 300;
var mH = 300;
var mCenter = mW / 2; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)
//获取Canvas
var radCtx = null;

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    radars:{
      type: Array,
      value: [0, 0, 0, 0, 0, 0],
      observer: function (newVal, oldVal) {
        console.log('newval = '+newVal);
        console.log('oldval = '+oldVal);
        if(newVal.toString() != oldVal.toString()){
          this.setData({
            radar: newVal,
          });
          this.drawData(newVal, true);
          // this.drawRadar();
        }
      },
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    radar: [0, 0, 0, 0, 0, 0],
    names: ["社区活跃度", "社区影响力", "技术贡献度", "活动活跃度", "开源贡献度", "学习积极性"],
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  lifetimes: {
    created: function(){
    },
    attached: function () {
      if(radCtx != null){
        radCtx = null;//变态啊，这个是全局的，无论在什么页面创建过就一直存在，所以要先销毁，否则画不出来
      }
      radCtx = wx.createCanvasContext("radarView", this);////获取Canvas
      this.drawRadar()
    },
    moved: function () {},
    detached: function () {
      radCtx = null;
    },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () {
    this.drawRadar()
  }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function () {

  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {

    },
    hide: function () {},
    resize: function () {},
    detached: function(){
      radCtx = null;
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 雷达图
  drawRadar: function () {
    var radars = this.data.radar;
    //调用
    this.drawArcEdge(mRadius + 30); //画圆
    this.drawArcEdge(mRadius + 80); //画圆
    this.drawEdge(); //画六边形
    this.drawLinePoint();
    //设置文本数据
    this.drawTextCans(this.data.names);
    this.drawData(radars, false);
    //开始绘制
    radCtx.draw(true);
  },
  //绘制圆
  drawArcEdge: function (radius) {
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(0.5) //设置线宽
    radCtx.beginPath()
    radCtx.arc(mCenter, mCenter, radius, 0, 2 * Math.PI)
    radCtx.stroke()
  },
  // 绘制6条边
  drawEdge: function () {
    radCtx.setStrokeStyle("white")
    radCtx.setLineWidth(1) //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numCount; j++) {
        //坐标
        var x = mCenter + rdius * Math.cos(mAngle * j);
        var y = mCenter + rdius * Math.sin(mAngle * j);
        radCtx.lineTo(x, y);
      }
      radCtx.closePath()
      radCtx.stroke()
    }
  },
  // 绘制连接点
  drawLinePoint: function () {
    radCtx.beginPath();
    for (var k = 0; k < numCount; k++) {
      var x = mCenter + mRadius * Math.cos(mAngle * k);
      var y = mCenter + mRadius * Math.sin(mAngle * k);

      radCtx.moveTo(mCenter, mCenter);
      radCtx.lineTo(x, y);
    }
    radCtx.stroke();
  },
  //绘制文字
  drawTextCans: function (mData) {
    radCtx.setFillStyle("white")
    // radCtx.font = 'bold 17px cursive'  //设置字体
    radCtx.font = '15px cursive' //设置字体
    for (var n = 0; n < numCount; n++) {
      var x = mCenter + mRadius * Math.cos(mAngle * n);
      var y = mCenter + mRadius * Math.sin(mAngle * n);
      // radCtx.fillText(mData[n], x, y);
      //通过不同的位置，调整文本的显示位置
      if (mAngle * n >= 0 && mAngle * n <= Math.PI / 2) {
        radCtx.fillText(mData[n], x + 5, y + 5);
      } else if (mAngle * n > Math.PI / 2 && mAngle * n <= Math.PI) {
        radCtx.fillText(mData[n], x - radCtx.measureText(mData[n]).width - 7, y + 5);
      } else if (mAngle * n > Math.PI && mAngle * n <= Math.PI * 3 / 2) {
        radCtx.fillText(mData[n], x - radCtx.measureText(mData[n]).width - 5, y);
      } else {
        radCtx.fillText(mData[n], x + 7, y + 2);
      }
    }
  },
  drawData: function(radars, redraw){
    if(redraw){
      radCtx.save();
      radCtx.clearRect(mCenter, mCenter, 2, 2);
    }
    //设置数据
    this.drawRegion(radars, 'rgba(241, 239, 94, 0.5)');
    //设置节点
    this.drawCircle(radars, 'rgba(241, 239, 94, 1)');
    if(redraw){
      radCtx.draw(true);
    }
  },
  //绘制数据区域(数据和填充颜色)
  drawRegion: function (mData, color) {
    radCtx.beginPath();
    for (var m = 0; m < numCount; m++) {
      var x = mCenter + mRadius * Math.cos(mAngle * m) * mData[m] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * m) * mData[m] / 100;

      radCtx.lineTo(x, y);
    }
    radCtx.closePath();
    radCtx.setFillStyle(color)
    radCtx.fill();
  },
  //画点
  drawCircle: function (mData, color) {
    var r = 2; //设置节点小圆点的半径
    for (var i = 0; i < numCount; i++) {
      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i] / 100;

      radCtx.beginPath();
      radCtx.arc(x, y, r, 0, Math.PI * 2);
      radCtx.fillStyle = color;
      radCtx.fill();
    }

  },
  },

})